<template>
  <div class="add_con">
    <div class="box_info one_line">
      <div class="title_bold">关联单据：</div>
      <div class="box_con">
        <div class="con_btn" @click="goLink" v-if="!linkForm">
          <i class="iconfont iconmenu-copy"></i>
          关联申请单
        </div>
        <template v-if="linkForm">
          <div class="con_detail">
            {{ auditForm.associatedFormName }}
          </div>
          <div class="con_del" @click="deleteLink" v-if="auditForm.saveStatus !== '1'"><van-icon name="close" /></div>
        </template>
      </div>
    </div>
    <div class="self_info">
      <div class="title_bold">基本信息：</div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">部门</div>
          <div class="right">{{ auditForm.orgName }}</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">姓名</div>
          <div class="right">{{ auditForm.userName }}</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">职务</div>
          <div class="right">{{ auditForm.post }}</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">证明人</div>
          <div class="right info_cell">
            <vanFieldCheckbox
              key="attendOrg"
              v-model="certifierList"
              placeholder="请选择"
              :columns="selectUserList"
              :selectValue="certifierList"
              label-width="100"
              :option="{ label: 'certifier', value: 'certifierId' }"
              @confirm="onConfirmOrg"
              :isSearch="true"
              :disabled="auditForm.status === '3'"></vanFieldCheckbox>
          </div>
        </div>
      </div>
      <!-- <div class="info_line">
        <div class="grid_info info_tip">
          提示：证明人，若出差时无陪同人员，则无需填写，只有一个陪同人员且是负责人也无需填写
        </div>
      </div> -->
      <div class="info_line">
        <div class="grid_info">
          <div class="left">交通工具</div>
          <div class="right">
            <van-radio-group v-model="auditForm.transportation" direction="horizontal" @change="radioChange">
              <van-radio name="1">公共交通-火车/高铁/客车/飞机</van-radio>
              <van-radio name="2">公车</van-radio>
              <van-radio name="3">平台租赁</van-radio>
              <van-radio name="4">其他(请注明)</van-radio>
            </van-radio-group>
          </div>
        </div>
      </div>
      <div class="info_line" v-if="auditForm.transportation === '4'">
        <div class="grid_info">
          <div class="left">其他说明</div>
          <div class="right info_cell">
            <van-field
              class="scroe_input"
              v-model="auditForm.transportationRemark"
              :placeholder="'请输入'"
              maxlength="20"
              autosize
              rows="1"
              type="textarea" />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_input">
          <div class="left">出差事由</div>
          <div class="right">
            <van-field
              class="scroe_input"
              v-model="auditForm.reimburseReason"
              rows="4"
              autosize
              type="textarea"
              :placeholder="'请输入'"
              maxlength="50"
              show-word-limit />
          </div>
        </div>
      </div>
    </div>
    <div class="box_info">
      <div class="title_bold">出差行程：</div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">起程时间</div>
          <div class="right info_cell" @click="chooseTimeDuty('0')">
            <van-cell :value="auditForm.startTime ? auditForm.startTime.slice(0, -3) : '选择时间'" is-link />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">离开时间</div>
          <div class="right info_cell" @click="chooseTimeDuty('1')">
            <van-cell :value="auditForm.endTime ? auditForm.endTime.slice(0, -3) : '选择时间'" is-link />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">出发地</div>
          <div class="right info_cell">
            <van-field class="scroe_input" v-model="auditForm.startPlace" :placeholder="'请输入'" maxlength="10" />
          </div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info">
          <div class="left">目的地</div>
          <div class="right info_cell">
            <van-field class="scroe_input" v-model="auditForm.leavePlace" :placeholder="'请输入'" maxlength="10" />
          </div>
        </div>
      </div>
    </div>
    <div class="box_info info_bill">
      <div class="title_bold">费用明细：</div>
      <div class="info_line line_tit">
        <div class="grid_info">
          <div class="left">车船费</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_side">
          <div class="left">单据张数</div>
          <div class="right info_cell">
            <van-field
              v-model="auditForm.expenseList[0].billCount"
              placeholder="请输入"
              maxlength="10"
              type="number"
              :formatter="formatter" />
          </div>
        </div>
        <div class="grid_info">
          <div class="left">金额</div>
          <div class="right info_cell">
            <van-field
              v-model="auditForm.expenseList[0].amount"
              placeholder="请输入"
              maxlength="8"
              type="number"
              :formatter="formatter1" />
          </div>
        </div>
      </div>
      <div class="info_line line_tit">
        <div class="grid_info">
          <div class="left">住宿费</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_side">
          <div class="left">单据张数</div>
          <div class="right info_cell">
            <van-field
              v-model="auditForm.expenseList[1].billCount"
              placeholder="请输入"
              maxlength="10"
              type="number"
              :formatter="formatter" />
          </div>
        </div>
        <div class="grid_info">
          <div class="left">金额</div>
          <div class="right info_cell">
            <van-field
              v-model="auditForm.expenseList[1].amount"
              placeholder="请输入"
              maxlength="8"
              type="number"
              :formatter="formatter1" />
          </div>
        </div>
      </div>
      <div class="info_line line_tit">
        <div class="grid_info">
          <div class="left">伙食补助/交通补助</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_side">
          <div class="left">天数</div>
          <div class="right info_cell">
            <van-field
              v-model="auditForm.expenseList[2].dayCount"
              placeholder="请输入"
              maxlength="3"
              type="number"
              :formatter="formatter1" />
          </div>
        </div>
        <div class="grid_info">
          <div class="left">金额</div>
          <div class="right info_cell">
            <van-field
              v-model="auditForm.expenseList[2].amount"
              placeholder="请输入"
              maxlength="8"
              type="number"
              :formatter="formatter1" />
          </div>
        </div>
      </div>
      <div class="info_line line_tit">
        <div class="grid_info">
          <div class="left">其他费用</div>
        </div>
      </div>
      <div class="info_line">
        <div class="grid_info info_side">
          <div class="left">单据张数</div>
          <div class="right info_cell">
            <van-field
              v-model="auditForm.expenseList[3].billCount"
              placeholder="请输入"
              maxlength="10"
              type="number"
              :formatter="formatter" />
          </div>
        </div>
        <div class="grid_info">
          <div class="left">总金额</div>
          <div class="right info_cell">
            <van-field
              v-model="auditForm.expenseList[3].amount"
              placeholder="请输入"
              maxlength="8"
              type="number"
              :formatter="formatter1" />
          </div>
        </div>
      </div>
    </div>
    <div class="box_info">
      <div class="title_bold">合计：</div>
      <div class="info_line info_sum">
        <div class="grid_info info_side">
          <div class="left">单据张数</div>
          <div class="right info_cell">
            {{ totalSumOnly('0') }}
          </div>
        </div>
        <div class="grid_info">
          <div class="left">总金额</div>
          <div class="right info_cell">
            {{ totalSumOnly('1') }}
          </div>
        </div>
      </div>
    </div>

    <div class="box_info box_bill" v-if="billAmount">
      <div class="title_bold">
        <span>*</span>
        发票信息：
      </div>
      <div class="info_line" v-if="auditForm.expenseList[0].billCount">
        <div class="grid_info">
          <div class="left">车船费：</div>
          <div class="right">
            <ImgUploadImg v-bind:albumList.sync="auditForm.fareList" accept=".jpeg,.png,.jpg" btnName="上传发票" />
          </div>
        </div>
      </div>
      <div class="info_line" v-if="auditForm.expenseList[1].billCount">
        <div class="grid_info">
          <div class="left">住宿费：</div>
          <div class="right">
            <ImgUploadImg v-bind:albumList.sync="auditForm.hotelList" accept=".jpeg,.png,.jpg" btnName="上传发票" />
          </div>
        </div>
      </div>
      <div class="info_line" v-if="auditForm.expenseList[3].billCount">
        <div class="grid_info">
          <div class="left">其他费用：</div>
          <div class="right">
            <ImgUploadImg
              v-bind:albumList.sync="auditForm.otherExpenseList"
              accept=".jpeg,.png,.jpg"
              btnName="上传发票" />
          </div>
        </div>
      </div>
    </div>
    <div class="box_info one_line column_line">
      <div class="title_bold">附件：</div>
      <div class="box_con">
        <ImgUpload v-bind:albumList.sync="auditForm.enclosureList" />
      </div>
    </div>
    <!-- 底部 -->
    <div class="fead_boot">
      <van-button plain type="info" @click="saveData('0')" v-if="auditForm.saveStatus !== '1'">暂存</van-button>
      <van-button type="info" @click="saveData('1')">提交</van-button>
      <van-button type="danger" @click="btnCheck('4')" v-if="auditForm.canRevoke === '1'">撤回</van-button>
      <van-button type="danger" @click="btnCheck('5')" v-if="auditForm.isCanZZ === '1'">终止</van-button>
    </div>
    <van-popup v-model="showTimeDuty" position="bottom">
      <div class="pop_days">
        <van-datetime-picker
          v-model="currentDays"
          type="datetime"
          @cancel="showTimeDuty = false"
          @confirm="timeConfirm"
          :min-date="minDate"
          :max-date="maxDate" />
      </div>
    </van-popup>
    <van-popup v-model="witPopupShow" position="bottom" class="wit-popup">
      <van-search placeholder="请输入" v-model="witnessSearch" />
      <van-picker
        cancel-button-text="取消"
        show-toolbar
        :columns="getWitnessList()"
        value-key="certifierId"
        @confirm="onConfirmPicker"
        @cancel="witPopupShow = false" />
    </van-popup>
  </div>
</template>

<script>
import moment from 'moment'
import {
  addTripReimburse,
  getAllUserList,
  updateTripReimburse,
  getTripReimburseDetail,
  checkIsCanRelated,
  getOrgLeader,
  approveFormExpense,
} from '@api/api-dailyManage.js'
import ImgUpload from '@com/ImgUpload'
import ImgUploadImg from '@com/ImgUploadImg'
import VanFieldCheckbox from '@com/VanFieldCheckbox'
export default {
  name: 'auditAdd',
  components: {
    ImgUpload,
    ImgUploadImg,
    VanFieldCheckbox,
  },
  data() {
    return {
      title: '',
      moment: moment,
      userInfo: JSON.parse(localStorage.userInfo),
      auditForm: {
        id: '',
        formTitle: '差旅费报销单',
        formType: '2',
        certifierList: [
          // {
          //   userName: '',
          //   userId: '',
          // },
        ],
        billCount: '',
        transportation: '',
        transportationRemark: '',
        reimburseReason: '',
        startTime: '',
        endTime: '',
        startPlace: '',
        leavePlace: '',
        expenseList: [
          {
            amount: '',
            billCount: '',
            expenseType: '1',
          },
          {
            amount: '',
            billCount: '',
            expenseType: '2',
          },
          {
            amount: '',
            dayCount: '',
            expenseType: '3',
          },
          {
            amount: '',
            billCount: '',
            expenseType: '4',
          },
        ],
        amountTotal: '',
        userId: localStorage.userId,
        userName: JSON.parse(localStorage.userInfo).userName,
        orgId: JSON.parse(localStorage.userInfo).loginPostInfo.orgId,
        orgName: JSON.parse(localStorage.userInfo).loginPostInfo.orgName,
        post: JSON.parse(localStorage.userInfo).loginPostInfo.postName,
        enclosureList: [], // 附件
        fareList: [], // 车船费
        hotelList: [], // 住宿费
        otherExpenseList: [], // 其他费用
        associatedForm: '', // 关联单据ID
        associatedFormName: '',
        relatedAccompanyList: [], // 关联单据陪同人员信息
      },
      showTimeDuty: false,
      minDate: new Date(2022, 11, 1),
      maxDate: new Date(moment().add(1, 'year').format('YYYY'), 11, 31),
      currentDays: new Date(), // 日期
      timeType: '0', // 0：开始时间；1：结束时间
      witPopupShow: false,
      witnessSearch: '',
      userAllList: [],
      editId: '',
      linkForm: false,
      certifierList: [],
      selectUserList: [],
      leaderInfo: {},
    }
  },
  computed: {
    billAmount() {
      if (
        this.auditForm.expenseList[0].billCount ||
        this.auditForm.expenseList[1].billCount ||
        this.auditForm.expenseList[3].billCount
      ) {
        return true
      } else {
        return false
      }
    },
  },
  watch: {
    witnessSearch: {
      handler(news) {
        this.getWitnessList()
      },
      deep: true,
    },
  },
  created() {
    if (sessionStorage.stash) {
      const stashStr = JSON.parse(sessionStorage.stash)
      for (const prop in stashStr) {
        this[prop] = stashStr[prop]
      }
      sessionStorage.removeItem('stash')
      if (sessionStorage.linkFormData) {
        const link = JSON.parse(sessionStorage.linkFormData)
        this.auditForm.associatedForm = link.id
        this.auditForm.associatedFormName = link.reimburseReason + ' （' + link.reimburseTime + '）'
        this.linkForm = true
        this.getTripReimburseDetail(link.id, 'link')
        sessionStorage.removeItem('linkFormData')
      }
    } else {
      this.editId = this.$route.query.id || ''
      this.getAllUserList()
      if (this.editId) {
        this.getTripReimburseDetail(this.editId, 'edit')
      }
    }
  },
  activated() {},
  mounted() {},
  destroyed() {},
  methods: {
    goback() {
      this.$route.meta.keepAlive = false
      this.$router.go(-1)
    },
    saveData(type) {
      if (type === '1') {
        if (!this.auditForm.transportation) {
          return this.$toast.fail('请选择交通工具')
        }
        if (this.auditForm.transportation === '4' && !this.auditForm.transportationRemark.trim().length) {
          return this.$toast.fail('请注明其他类型交通工具')
        }
        if (!this.auditForm.reimburseReason.trim().length) {
          return this.$toast.fail('请输入出差事由')
        }
        if (!this.auditForm.startTime) {
          return this.$toast.fail('请选择起程时间')
        }
        if (!this.auditForm.endTime) {
          return this.$toast.fail('请选择离开时间')
        }
        if (!this.auditForm.startPlace.trim().length) {
          return this.$toast.fail('请输入出发地')
        }
        if (!this.auditForm.leavePlace.trim().length) {
          return this.$toast.fail('请输入目的地')
        }
        if (!this.auditForm.amountTotal) {
          return this.$toast.fail('请填写相关费用信息')
        }
        for (let i = 0; i < 4; i++) {
          const el = this.auditForm.expenseList[i]
          if (el.amount && ((!el.billCount && i !== 2) || (!el.dayCount && i === 2))) {
            return this.$toast.fail('请填写完整的费用信息')
          }
          if (!el.amount && ((el.billCount && i !== 2) || (el.dayCount && i === 2))) {
            return this.$toast.fail('请填写完整的费用信息')
          }
        }
        if (this.auditForm.expenseList[0].amount && !this.auditForm.fareList.length) {
          return this.$toast.fail('请上传车船费相关发票信息附件图片')
        }
        if (this.auditForm.expenseList[1].amount && !this.auditForm.hotelList.length) {
          return this.$toast.fail('请上传住宿费相关发票信息附件图片')
        }
        if (this.auditForm.expenseList[3].amount && !this.auditForm.otherExpenseList.length) {
          return this.$toast.fail('请上传其他费用相关发票信息附件图片')
        }
        if (!this.auditForm.expenseList[0].amount) {
          this.auditForm.fareList = []
        }
        if (!this.auditForm.expenseList[1].amount) {
          this.auditForm.hotelList = []
        }
        if (!this.auditForm.expenseList[3].amount) {
          this.auditForm.otherExpenseList = []
        }
      }
      const certifierList = []
      this.certifierList.forEach(item => {
        const arr = this.userAllList.filter(li => {
          return li.certifierId === item
        })
        certifierList.push(arr[0])
      })

      const param = {
        ...this.auditForm,
        certifierList,
        year: moment().format('YYYY'),
        saveStatus: type,
        transportationRemark: this.auditForm.transportation === '4' ? this.auditForm.transportationRemark : '',
      }
      /* eslint-disable */
      if (!this.auditForm.id && this.editId) {
        param.id = this.editId
      }
      if (type === '1') {
        if (this.auditForm.associatedForm && this.auditForm.saveStatus !== '1') {
          checkIsCanRelated({
            id: this.auditForm.associatedForm,
          }).then(res => {
            if (res.data === '1') {
              this.dialogTip(type, param)
            } else {
              this.$dialog.alert({ message: '出差前审批单已被关联，请选择其他表单' }).then(res => {})
            }
          })
        } else {
          this.dialogTip(type, param)
        }
      } else {
        this.submitForm(type, param)
      }
    },
    radioChange() {},
    timeConfirm(value) {
      if (this.timeType === '0') {
        this.auditForm.startTime = moment(value).format('YYYY-MM-DD HH:mm:ss')
      } else {
        this.auditForm.endTime = moment(value).format('YYYY-MM-DD HH:mm:ss')
      }
      this.showTimeDuty = false
    },
    chooseTimeDuty(type) {
      this.currentDays = new Date()
      this.timeType = type
      this.minDate = new Date(2022, 11, 1)
      this.maxDate = new Date(moment().add(1, 'year').format('YYYY'), 11, 31)
      if (type === '0') {
        if (this.auditForm.startTime) {
          this.currentDays = moment(this.auditForm.startTime).toDate()
        }
        if (this.auditForm.endTime) {
          this.maxDate = new Date(this.auditForm.endTime)
        }
      } else {
        if (this.auditForm.endTime) {
          this.currentDays = moment(this.auditForm.endTime).toDate()
        }
        if (this.auditForm.startTime) {
          this.minDate = new Date(this.auditForm.startTime)
        } else {
          return
        }
      }
      this.showTimeDuty = true
    },
    totalSumOnly(type) {
      if (type === '0') {
        const billCount1 = Number(this.auditForm.expenseList[0].billCount)
        const billCount2 = Number(this.auditForm.expenseList[1].billCount)
        const billCount3 = Number(this.auditForm.expenseList[3].billCount)
        this.auditForm.billCount = billCount1 + billCount2 + billCount3 || 0
        return this.auditForm.billCount
      } else {
        const amountTotal1 = Number(this.auditForm.expenseList[0].amount) * 100 || 0
        const amountTotal2 = Number(this.auditForm.expenseList[1].amount) * 100 || 0
        const amountTotal3 = Number(this.auditForm.expenseList[2].amount) * 100 || 0
        const amountTotal4 = Number(this.auditForm.expenseList[3].amount) * 100 || 0
        const amountTotal = amountTotal1 + amountTotal2 + amountTotal3 + amountTotal4
        this.auditForm.amountTotal = amountTotal / 100
        return this.auditForm.amountTotal
      }
    },
    formatter(value) {
      return value.replace(/^\D*(\d*).*$/g, '$1')
    },
    formatter1(value) {
      return value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')
    },
    chooseWit() {
      this.witnessSearch = ''
      this.witPopupShow = true
    },
    getWitnessList() {
      let ret = []
      ret = this.userAllList.filter(item => {
        return item.certifier.includes(this.witnessSearch)
      })
      return ret
    },
    onConfirmPicker(value) {
      this.auditForm.certifierList = value
      this.witPopupShow = false
    },
    getAllUserList() {
      getAllUserList().then(res => {
        const userArr = []
        res.data.forEach(item => {
          userArr.push({
            certifierId: item.userId,
            certifier: item.userName,
            certifierPost: item.post || '',
          })
        })
        const i = userArr.findIndex(item => {
          return item.certifierId === this.userInfo.userId
        })
        userArr.splice(i, 1)

        this.userAllList = userArr

        if (!this.selectUserList.length) {
          this.selectUserList = userArr
        }
      })
    },
    getTripReimburseDetail(id, type) {
      getTripReimburseDetail({
        id: id,
      }).then(res => {
        if (res.code === 0) {
          if (type === 'edit') {
            if (res.data.associatedForm) {
              this.linkForm = true
            }
            this.auditForm = res.data
            const arrList = []
            this.auditForm.certifierList.forEach(item => {
              arrList.push(item.certifierId)
            })
            this.certifierList = arrList
            if (this.auditForm.relatedAccompanyList.length) {
              const arr = []
              this.auditForm.relatedAccompanyList.forEach(item => {
                arr.push({
                  certifierId: item.accompanyId,
                  certifier: item.accompanyName,
                  certifierPost: item.accompanyPost || '',
                })
              })
              this.selectUserList = arr
            }
          } else {
            const data = res.data
            const userArr = []
            if (data.accompanyList.length) {
              data.accompanyList.forEach(item => {
                userArr.push({
                  certifierId: item.accompanyId,
                  certifier: item.accompanyName,
                  certifierPost: item.accompanyPost || '',
                })
              })
            }
            this.auditForm.certifierList = userArr
            if (data.accompanyList.length) {
              this.selectUserList = userArr
            }
            this.auditForm.transportation = data.transportation
            this.auditForm.transportationRemark = data.transportationRemark
            this.auditForm.reimburseReason = data.reimburseReason
            this.auditForm.startTime = data.startTime
            this.auditForm.endTime = data.endTime
            this.auditForm.startPlace = data.startPlace
            this.auditForm.leavePlace = data.leavePlace
            const arr = []
            userArr.forEach(item => {
              arr.push(item.certifierId)
            })
            this.certifierList = arr
            this.auditForm.relatedAccompanyList = data.accompanyList || []
          }
        }
      })
    },
    submitForm(type, param) {
      if (this.editId) {
        updateTripReimburse(param).then(res => {
          if (res.code === 0) {
            if (type === '0') {
              this.$toast.success('暂存成功')
            } else {
              this.$toast.success('提交成功')
              setTimeout(() => {
                this.$router.go(-1)
              }, 500)
            }
          }
        })
      } else {
        addTripReimburse(param).then(res => {
          if (res.code === 0) {
            if (type === '0') {
              this.editId = res.data
              this.$toast.success('暂存成功')
            } else {
              this.$toast.success('提交成功')
              setTimeout(() => {
                this.$router.go(-1)
              }, 500)
            }
          }
        })
      }
    },
    deleteLink() {
      this.auditForm = {
        id: '',
        formTitle: '差旅费报销单',
        formType: '2',
        // certifierInfo: [],
        certifierList: [],
        billCount: '',
        transportation: '',
        transportationRemark: '',
        reimburseReason: '',
        startTime: '',
        endTime: '',
        startPlace: '',
        leavePlace: '',
        expenseList: [
          {
            amount: '',
            billCount: '',
            expenseType: '1',
          },
          {
            amount: '',
            billCount: '',
            expenseType: '2',
          },
          {
            amount: '',
            dayCount: '',
            expenseType: '3',
          },
          {
            amount: '',
            billCount: '',
            expenseType: '4',
          },
        ],
        amountTotal: '',
        userId: localStorage.userId,
        userName: JSON.parse(localStorage.userInfo).userName,
        orgId: JSON.parse(localStorage.userInfo).loginPostInfo.orgId,
        orgName: JSON.parse(localStorage.userInfo).loginPostInfo.orgName,
        post: JSON.parse(localStorage.userInfo).loginPostInfo.postName,
        enclosureList: [], // 附件
        fareList: [], // 车船费
        hotelList: [], // 住宿费
        otherExpenseList: [], // 其他费用
        associatedForm: '', // 关联单据ID
        associatedFormName: '',
        relatedAccompanyList: [], // 关联单据陪同人员信息
      }
      this.certifierList = []
      this.linkForm = false
    },
    goLink() {
      sessionStorage.setItem('stash', JSON.stringify(this.$data))
      this.$router.push('/auditLink')
    },
    onConfirmOrg(val, list) {
      // console.log('val :>> ', val)
      // console.log('list :>> ', list)
      this.auditForm.certifierList = list
    },
    async getOrgLeader() {
      const { data } = await getOrgLeader({
        orgId: this.userInfo.loginPostInfo.orgId,
      })
      this.leaderInfo = data
    },
    dialogTip(type, param) {
      const that = this
      that.$dialog
        .confirm({
          message: '请确认当前报销金额与票据数量是否正确，确定后不可修改。',
        })
        .then(() => {
          that.submitForm(type, param)
        })
        .catch(() => {})
    },
    btnCheck(type) {
      const str = type === '4' ? '确认撤回该报销单吗？' : '确认终止该报销单吗？'
      const str1 = type === '4' ? '撤回成功' : '终止成功'
      this.$dialog
        .confirm({
          message: str,
        })
        .then(() => {
          approveFormExpense({
            content: '',
            id: this.auditForm.id,
            processInstanceId: this.auditForm.processInstanceId || '',
            status: type,
            taskId: this.auditForm.taskId || '',
          }).then(res => {
            if (res.code === 0) {
              this.$toast.success(str1)
              setTimeout(() => {
                this.$router.go(-1)
              }, 500)
            }
          })
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.add_con {
  padding: 7px 12px 60px;
  background-color: #f5f5f5;
  font-size: 13px;
  color: #333333;
  width: 100%;
  overflow-x: hidden;
  min-height: 100%;
  .self_info {
    width: 100%;
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    margin-top: 10px;
    .add-box {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      .add-one {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #86642c;
        font-size: 14px;
        padding: 7px 15px;
        border: 1px solid #86642c;
        border-radius: 5px;
        span {
          margin-left: 7px;
          font-weight: 600;
        }
      }
    }
  }
  .title_bold {
    font-weight: 800;
    font-size: 15px;
    span {
      color: #d9001b;
    }
  }
  .info_line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .grid_info {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 0 5px;
      border-bottom: 1px solid #d7d7d7;
      .left {
        font-size: 14px;
        width: 65px;
        background-image: linear-gradient(#ffffff 50%, #f9f1e8);
        color: #333333;
        text-align: center;
      }
      .right {
        flex: 1;
        text-align: right;
      }
    }
    .info_side {
      margin-right: 10px;
    }
    .info_tip {
      color: #999999;
      padding: 7px 7px;
      // color: #d9001b;
      // text-indent: 2em;
    }
  }
  .van-radio-group {
    .van-radio {
      margin-left: 20px;
      margin-bottom: 7px;
    }
  }
  .info_cell {
    margin-left: 5px;
    /deep/.van-cell {
      display: flex;
      align-items: center;
      font-size: 13px;
      .van-icon-arrow {
        display: flex;
        align-items: center;
      }
    }
    /deep/.van-cell__value {
      text-align: right;
      padding-right: 10px;
      color: #999999;
    }
    /deep/.van-field__control {
      text-align: right;
    }
  }
  .info_input {
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    .right {
      border: 1px solid #efefef;
      margin-top: 10px;
      width: 100%;
      .scroe_input {
        padding: 0 5px;
        width: 100%;
        height: auto;
        line-height: 20px;
        font-size: 13px;
        resize: none;
      }
    }
  }

  .box_info {
    background-color: #ffffff;
    padding: 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    margin-top: 15px;
    .info_radio {
      .left {
        width: 100px;
      }
      .van-radio-group {
        justify-content: flex-end;
        .van-radio {
          margin-left: 20px;
          margin-bottom: 0;
        }
      }
    }
    .info_sum {
      .grid_info {
        .left {
          min-width: 65px;
        }
        max-width: 50%;
      }
      .info_cell {
        color: #999999;
      }
    }
  }
  .info_bill {
    .line_tit {
      .grid_info {
        border-bottom: 0;
        padding-bottom: 0;
        .left {
          width: 100%;
          background-image: none;
          text-align: left;
          margin-left: 14px;
          position: relative;
        }
        .left::before {
          content: '◆';
          position: absolute;
          // width: 5px;
          // height: 100%;
          // background-color: #e5d2b4;
          left: -12px;
          color: #e5b568;
          font-size: 18px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  .one_line {
    display: flex;
    align-items: center;
    .box_con {
      flex: 1;
      position: relative;
      .con_btn {
        border: 1px dashed #d0d7e0;
        color: #0f61d5;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          margin-right: 10px;
        }
      }
      .con_detail {
        border: 1px dashed #d0d7e0;
        padding: 5px;
        width: 100%;
        padding-right: 25px;
      }
      .con_del {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #999999;
      }
    }
  }
  .box_bill {
    .grid_info {
      align-items: flex-start;
      flex-direction: column;
      .left {
        width: 100%;
        background-image: none;
        text-align: left;
        margin-left: 14px;
        position: relative;
        font-weight: 600;
      }
      /deep/.right {
        width: 100%;
        .previews {
          justify-content: start;
        }
        .up_li {
          width: 30% !important;
          height: 70px !important;
          margin-right: 3%;
        }
      }
    }
  }
  .column_line {
    flex-wrap: wrap;
    .box_con {
      width: 100%;
    }
  }
  // 底部
  .fead_boot {
    .van-button {
      height: 36px;
      width: 28%;
    }
  }
}
/deep/.wit-popup {
  .van-search {
    margin: 12px 7px 0;
  }
}
</style>
